<template>
  <block>
    <!-- 使用自定义组件my-search -->
    <my-search @click="goSearch"></my-search>
    <view class="scroll-view-container">
      <!-- 左侧滑动区域 -->
      <scroll-view class="left-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }">
        <view v-for="(item, index) in cateList" :key="index">
          <view @click="changeActive(index)" :class="['left-scroll-view-item', index === active ? 'active' : '']">
            {{ item.cat_name }}</view>
        </view>
      </scroll-view>
      <!-- 右侧滑动区域 -->
      <scroll-view class="right-scroll-view" scroll-y="true" :scroll-top="scrollTop" :style="{ height: wh + 'px' }">
        <view class="cate-Level2" v-for="(item2, index2) in cateLevel2" :key="index2">
          <!-- 二级分类的标题 -->
          <view class="cate-Level2-title">
            / {{ item2.cat_name }} /
          </view>
          <!-- 二级分类下面的三级分类列表 -->
          <view class="cate-level3-list">
            <!-- 三级分类的item项 -->
            <view class="cate-level3-item" @click="goGoodsList(item3)"
            v-for="(item3, index3) in item2.children" :key="index3">
              <!-- 三级分类的图片 -->
              <image :src="item3.cat_icon"></image>
              <!-- 三级分类的文本 -->
              <text>{{ item3.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </block>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MySearch from '@/components/my-search/my-search.vue'
const components = {
  MySearch
}
onMounted(() => {
  getCateList()
})

function goSearch() {
  uni.navigateTo({
    url: '/subpkg/search/search'
  })
}
// 点击三级分类的数据跳转到商品列表
function goGoodsList(item3){
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
  })
}
// 左侧滑动区域的数据点击时候右侧滑动区域显示对应的数据
const scrollTop = ref(0)
// 二级分类的数据
const cateLevel2 = ref([])
/**
 * 获取窗口的高度
 */
const wh = ref(0)
const sysInfo = uni.getSystemInfoSync()
wh.value = sysInfo.windowHeight-50

// 获取分类列表的数据
const cateList = ref([])
async function getCateList() {
  const { data } = await uni.$http.get('/api/public/v1/categories')
  if (data.meta.status === 200) {
    cateList.value = data.message
    cateLevel2.value = data.message[0].children
  }
}

// 点击左侧滑动区域的项时候高亮
const active = ref(0)
function changeActive(index) {
  active.value = index
  // 赋值二级分类的数据
  cateLevel2.value = cateList.value[index].children
  // 滚动到顶部
  scrollTop.value = scrollTop.value===0?1:1
}


</script>

<style lang="scss">
.scroll-view-container {
  display: flex;
}

// 左侧滑动区域 
.left-scroll-view {
  width: 120px;
}

// 左侧滑动区域的每一项
.left-scroll-view-item {
  background: #f7f7f7;
  line-height: 60px;
  font-size: 14px;
  text-align: center;

  &.active {
    background: #ffffff;
    position: relative;

    &::before {
      content: ' ';
      display: block;
      width: 3px;
      height: 30px;
      background: red;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
}

// 右侧滑动区域的每一项
.right-scroll-view {
  padding-left: 10px;
}

// 右侧滑动区域的每一项的标题
.cate-Level2-title {
  font-size: 15px; // 增加字体大小
  padding: 20px 0; // 增加上下间距
  text-align: center;
  font-weight: bold;
  color: #333; // 更深的颜色
}

// 二级分类下面的三级分类列表
.cate-level3-list {
  // 弹性布局
  display: flex;
  // 自动换行
  flex-wrap: wrap;

  // 三级分类的item项
  .cate-level3-item {
    width: 33.33%;
    display: flex;
    // 纵向布局
    flex-direction: column;
    // 水平居中
    align-items: center;
    // 垂直间距
    justify-content: center;
    margin-bottom: 10px;

    image {
      width: 60px;
      height: 60px;
    }

    text {
      font-size: 12px;
    }
  }
}
</style>